<template>
  <div>
    <el-button type="primary" @click="openDialog">客户查询</el-button>

    <el-dialog :visible.sync="dialogVisible" title="查询客户" width="50%">
      <el-form :model="form" ref="form">
        <el-form-item label="客户名称" v-if="!showCustomerDetail" :rules="{ required: true, message: '请输入客户名称' }">
          <el-input v-model="searchName" @blur="onNameChange"></el-input>
        </el-form-item>
        <el-table :data="customerList" v-if="showCustomerList" @row-dblclick="onRowClick">
          <el-table-column prop="name" label="客户名称">
            <template slot-scope="scope">
              <el-link @click.native.prevent="onRowClick(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="showCustomerDetail">
          <el-form-item label="客户名称" prop="name">
            <el-input v-model="form.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="客户地址" prop="address">
            <el-input v-model="form.address" disabled></el-input>
          </el-form-item>
          <el-form-item label="客户归属地" prop="region">
            <el-input v-model="form.region" disabled></el-input>
          </el-form-item>
          <el-form-item label="客户联系人" prop="contactPerson">
            <el-input v-model="form.contact_person" disabled></el-input>
          </el-form-item>
          <el-form-item label="客户电话" prop="phone">
            <el-input v-model="form.phone1" disabled></el-input>
          </el-form-item>
          <el-form-item label="客户经理">
            <el-input v-model="form.manager" disabled></el-input>
          </el-form-item>
          <el-form-item label="客户经理电话" prop="manager_phone">
            <el-input v-model="form.manager_phone" disabled></el-input>
          </el-form-item>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="exportToExcel">导出</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      dialogVisible: false,
      searchName: '',
      form: {
        name: '',
        address: '',
        contact_person: '',
        phone1: '',
        region: '',
        operator: 'operator1',
        manager: '',
        manager_phone: '',
        business_mgr: '',
        status: ''
      },
      customerList: [],
      showCustomerList: false,
      showCustomerDetail: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      this.resetForm();
    },
    async onNameChange() {
      if (this.searchName) {
        try {
          const response = await axios.post('/api/customer/searchAll', this.searchName, {
            headers: {
              'Content-Type': 'text/plain'
            }
          });
          this.customerList = response.data.data;
          this.showCustomerList = true;
          this.showCustomerDetail = false;
        } catch (error) {
          this.$message.error('查询客户失败');
        }
      } else {
        this.showCustomerList = false;
        this.showCustomerDetail = false;
      }
    },
    onRowClick(row) {
      this.form = { ...row };
      this.showCustomerDetail = true;
      this.showCustomerList = false;
    },
    exportToExcel() {
      const data = this.customerList.map(customer => ({
        '客户名称': customer.name,
        '客户地址': customer.address,
        '客户归属地': customer.region,
        '客户联系人': customer.contact_person,
        '客户电话': customer.phone1,
        '客户经理': customer.manager,
        '客户经理电话': customer.manager_phone,

        // 其他字段
      }));
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, '客户列表');
      XLSX.writeFile(wb, '客户列表.xlsx');
    },
    resetForm() {
      this.searchName = '';
      this.form = {
        name: '',
        address: '',
        contact_person: '',
        phone1: ''
      };
      this.customerList = [];
      this.showCustomerList = false;
      this.showCustomerDetail = false;
    }
  }
};
</script>
